<template>
    <div>
        <!-- <h1> - - - - - -  - - - - - - - -</h1> -->

        <h1>{{musixList.songName}}</h1>
        <h2>{{musixList.albumName}}</h2>
        <h2>{{musixList.artistName}}</h2>
        <div class="music_pic">
            <img :src="musixList.songPic">
        </div>
        <p>时长：{{parseInt(musixList.time/60)}}分 - {{musixList.time%60}}秒</p>
        <audio :src="musixList.songLink" controls></audio>

    </div>
</template>


<script>
export default {

    data(){
        return{

            musixList:{}

        }
    },
    methods:{
        getMusic(){
            // console.log(this.$route)
            let _this = this
            _this.$axios.get('/music/song/detail?songId='+_this.$route.query.id).then(res=>{
                console.log(res.data.data)
                _this.musixList = res.data.data
            })
        }
    },
    created(){
        this.getMusic()
    }
    
}
</script>


<style lang="less" scoped>
audio{
    display: block;
    border-radius: 10px;
}

h1,h2,p,audio{
    width: 90%;
    margin: 15px auto;
    text-align: center;
    color:#444;
    line-height: 1.5;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
}
h1{
    font-size: 18px;
}
h2{
    font-size: 15px;
}

    .music_pic{
        width: 150px;
        height: 150px;
        border-radius: 15px;
        background-color: #aaa;
        margin: 25px auto;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
    
</style>